<template>
  <BasicTabs v-model="activeTab" :tabs="tabs" />
</template>

<script setup lang="ts">
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'
  import PageView from './PageView.vue'
  import { getGongXuBuDaiFuJi } from '@/api/gongGongChaXun'
  import { isQuYu } from '@/utils'

  const activeTab = ref('细纱')
  const tabs = shallowRef<TabPaneItem[]>([])

  const getTabs = () => {
    // 获取工艺节点list
    getGongXuBuDaiFuJi().then((res) => {
      tabs.value = res.map<TabPaneItem>((v) => ({
        name: v.name,
        label: v.name,
        isFit: true,
        slots: {
          // 函数式可以响应式传参,否则需要直接传递响应式数据,会造成类型错误
          default: () => h(PageView, { gongXuId: v.id, gongXuName: v.name, isQuYu: isQuYu.value })
        }
      }))
    })
  }

  onMounted(() => {
    getTabs()
  })
</script>
